<template>
  <div class="myWorksHead" id="myWorksHead">
    <div class="myWorksHead-top">
      <a href="javascript:;" :title="$t('userAdmin.works.head.title')">
        <div class="backHome" @click="recovery" id="backHome" style="background-color: transparent">
          <i class="iconfont icon-return" style="font-size: 23px;" id="backHome-icon"></i>
        </div>
      </a>
      <router-link to="/userAdminPage/myWorks/error">
        <div v-if="this.component == 'error'" style="font-weight: bolder">
          {{$t('userAdmin.works.head.nav01')}}
        </div>
        <div v-else >
          {{$t('userAdmin.works.head.nav01')}}
        </div>
      </router-link>
      <router-link to="/userAdminPage/myWorks/question">
        <div v-if="this.component == 'question'" style="font-weight: bolder">
          {{$t('userAdmin.works.head.nav02')}}
        </div>
        <div v-else >
          {{$t('userAdmin.works.head.nav02')}}
        </div>
      </router-link>
      <router-link to="/userAdminPage/myWorks/blink">
        <div v-if="this.component == 'blink'" style="font-weight: bolder">
          {{$t('userAdmin.works.head.nav03')}}
        </div>
        <div v-else >
          {{$t('userAdmin.works.head.nav03')}}
        </div>
      </router-link>
    </div>
    <div class="search" v-if="this.component != 'blink'">
      <form action="javascript:;" method="get">
        <input type="text"
               v-model="keyWord"
               :placeholder="$t('userAdmin.works.head.searchPlaceholder')"
               autocomplete="off"
               name="searchValue"
               :title="$t('userAdmin.works.head.searchTitle')"
               @keyup.enter = "toSearch">
        <a href="javascript:;">
          <div class="query" @click="toSearch"><i class="iconfont icon-search"></i></div>
        </a>
      </form>
    </div>
  </div>
</template>

<script>
    export default {
        name: "UserAdminMyWorks-head",
        data() {
            return {
                keyWord: '',
                component:''
            }
        },
        methods:{
            recovery(){
                // 返回初始页
                this.keyWord = ""
                this.$parent.recovery();
                this.notDisplayBack()

            },
            toSearch(){
                if (this.keyWord.trim() != "") {
                    this.$parent.search(this.keyWord)
                    this.displayBack()
                }
            },
            notDisplayBack(){
                document.getElementById("backHome").style.width = "0px"
                document.getElementById("backHome").style.marginLeft = "0px"
                document.getElementById("backHome-icon").style.display = "none"
            },
            displayBack(){
                document.getElementById("backHome").style.width = "30px"
                document.getElementById("backHome").style.marginLeft = "20px"
                document.getElementById("backHome-icon").style.display = "block"
            },

            getComponentClassify(val){
                this.component = val
            },
        }
    }
</script>

<style scoped>
  .myWorksHead{
    margin: 10px auto;
    width: 100%;
    height: 50px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid #ffffff;
    border-radius: 3px;
    transition: 0.3s;
    letter-spacing: 1px;
    position: relative;
  }

  .myWorksHead-top div{
    float: left;
    height: 30px;
    line-height: 30px;
    /*font-weight: bolder;*/
    color: rgb(41, 41, 41);
    margin-top: 10px;
    margin-left: 20px;
    font-size: 17px;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 3px;
    transition: 0.2s;

  }
  .myWorksHead-top a:nth-child(1) div{
    float: left;
    width: 0px;
    margin-left: 0px;
    height: 30px;
    color: #707070;
    line-height: 30px;
    padding-left: 0px;
    padding-right: 0px;
    transition: 0.3s;
    overflow: hidden;
  }

  .search{
    height: 40px;
    width: 310px;
    margin-left: 420px;
    background-color: rgba(219, 230, 233, 0.83);
    border-radius: 5px;
    position: absolute;
    top: 6px;
    right: 20px;
  }
  .search input{
    height: 30px;
    width: 250px;
    border-radius: 5px;
    position: absolute;
    top: 4px;
    left: 5px;
    font-size: 13px;
    border: none;
    background-color: transparent;
    padding-left: 10px;
    color: #444444;
    font-weight: normal;
    letter-spacing: 1px;
    font-weight: bolder;
    transition: 0.3s;
  }
  .search input::placeholder{
    color: #7b7b7b;
    font-weight: normal;
  }
  .search input:hover{
    background-color: rgb(246, 246, 246);
  }
  .query{
    height: 32px;
    width: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 5px;
    position: absolute;
    top: 4px;
    right: 5px;
    border: none;
    color: rgb(248, 248, 248);
    transition: 0.2s;
    /*background-color: cadetblue;*/
  }
  .query i{
    font-size: 28px;
    color: #656565;
    /*font-weight: bolder;*/
  }
  .query:hover{
    background-color: rgb(246, 246, 246);
  }

  .myWorksHead-top a div:hover{
    background-color: rgb(228, 228, 228);
  }
  .myWorksHead-top a div:active{
    background-color: rgb(245, 245, 245);
  }
</style>
